<template>
	<div class="">
		<el-row :span="24">
			<!-- pc -->
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex" :navs="navs" :changeNav="changeNav"></PcDrawer>
					<div class="bghhhhh">
						<div class="rightCon">
							<headerPcTow :title="$t('h_process.title18')" :isShow="true"></headerPcTow>

							<div class="con1One">
								<div class="conheaderTow">
									<select v-model="sele" @change="chageSelect" class="pcSele">
										<option value="1">{{$t('h_process.title2')}}</option>
										<option value="2">{{$t('h_process.title3')}}</option>
										<option value="3">{{$t('h_process.title4')}}</option>
										<option value="4">{{$t('h_process.title5')}}</option>
										<option value="5">{{$t('h_process.title6')}}</option>
									</select>
									<div class="right">{{$t('h_process.title19')}} <span
											style="color: #ffaa09;padding-left:10px;">{{allMoney}}</span></div>
								</div>
								<div class="ul" style="width: 100%;padding-bottom: 20px;">
									<div class="fanshuiBox">
										<ul>
											<li>{{$t('h_process.title20')}}</li>
											<li>{{$t('h_process.title14')}}</li>
										</ul>
										<div class="fanlistBox">
											<ul v-for="(item,index) in lists" :key="index" v-if="lists.length != 0">
												
												<li>
													{{item.money}}
												</li>
												<li>
													{{$F.date('Y-m-d H:i:s',item.create_time)}}
												</li>
											</ul>
										</div>
										<!-- <div class="block">
												<el-pagination @size-change="handleSizeChange" class="pageInpt"
													@current-change="handleCurrentChange" :current-page="currentPage4"
													background
													:page-sizes="[100, 200, 300, 400]" :page-size="100"
													layout="total, sizes, prev, pager, next, jumper" :total="400">
												</el-pagination>
											</div> -->
									</div>
									<div class="rightThree" v-if="lists.length == 0">
										<div class="nodataTow">
											<img src="../../assets/images/yh/nodata.png" alt="">
											<div>{{$t('h_process.title13')}}</div>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</el-col>
			<!-- h5 -->
			<el-col :sm="0" :xs="24">
				<div class="index pageContainer">
					<div class="header anquantop">
						<div class="left" @click="goback">
							<i style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 21.999 35.998" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
								</svg>
							</i>
							<span></span>
						</div>
						<div class="title">{{$t('h_process.title18')}}</div>
						<div class="right"></div>
					</div>
					<div class="con container scroll-container" @scroll="scroll">
						<div class="conheader">
							<select v-model="sele" @change="chageSelect">
								<option value="1">{{$t('h_process.title2')}}</option>
								<option value="2">{{$t('h_process.title3')}}</option>
								<option value="3">{{$t('h_process.title4')}}</option>
								<option value="4">{{$t('h_process.title5')}}</option>
								<option value="5">{{$t('h_process.title6')}}</option>
							</select>
							<div class="right">{{$t('h_process.title19')}} <span
									style="color: #ffaa09;padding-left: .12rem;">{{allMoney}}</span></div>
						</div>
						<div class="">
							<div class="fanshuiritem" v-for="(item,index) in lists" :key="index">
								<div class="left">
									<!-- <img :src="$F.getApiUrl()+'/gametype/'+item.gameCode+'.png'" alt=""> -->
									<div>{{item.name}}</div>
								</div>
								<div class="center">
									<!-- <div class="up">
										<div>有效投注 <span style="color:#fff;">{{item.tz_money}}</span></div>
										<div class="righttext">返水比例 <span style="color:#fff;">{{item.fs_scale*1}}%</span></div>
									</div> -->
									<div class="up" style="margin-bottom: 0;">
										<div>{{$t('h_process.title20')}} <span style="color:#ffaa09;">{{item.money}}</span></div>
										<div class="righttext">{{$t('h_process.title14')}} <span
												style="color:#fff;">{{$F.date('Y-m-d H:i:s',item.create_time)}}</span>
										</div>
									</div>
								</div>
								<div class="icon" style="opacity: 0;">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 21.999 35.998" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
										</svg>
									</i>
								</div>
							</div>
							<div class="nodata" v-if="lists.length == 0">
								<img src="../../assets/images/yh/nodata.png" alt="">
								<div>{{$t('h_process.title13')}}</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>

</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	import headerPcTow from '../../components/headerPcTow.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	export default {
		data() {
			return {
				page: 0,
				sele: '1',
				lists: [],
				allMoney: 0,
				navIndex: 0,
				navs: [{
						id: 0,
						name: this.$t('h_process.title23'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('h_process.title24'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('h_process.title25'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('h_process.title26'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('h_process.title27'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name: this.$t('h_process.title28'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('h_process.title29'),
						key: 'icon_game_menu_active_8',
					},
				
					{
						id: -2,
						name: this.$t('h_process.title30'),
						key: 'icon_game_menu_active_100',
					},
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('h_process.title31'),
						key: 'comm_icon_ss',
					},
				],
			}
		},
		components: {
			navHeader,
			PcHedaer,
			PcDrawer,
			headerPcTow
		},
		created() {
			this.fsLog()
		},
		methods: {
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav(item) {
				this.navIndex = item.id
				document.querySelector('.scroll-container').scrollTop = document.querySelector('#gameslist_' + item.id)
					.offsetTop - (window.outerWidth / 750 * 200)
			},
			scroll(e) {
				let h = e.target.scrollHeight - e.target.clientHeight - 20
				if (e.target.scrollTop >= h) {
					this.fsLog()
				}
			},
			fsLog() {
				if (this.apisuo) {
					return;
				}
				if (this.is_end) {
					return;
				}
				this.apisuo = true
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.page++;
				this.$api.fsLog({
					page: this.page,
					type: this.sele,
				}, (res) => {
					this.apisuo = false
					loading.close()
					if (res.code == 0) {
						if (res.data.list.length == 0) {
							this.is_end = true
						}
						this.lists = this.lists.concat(res.data.list)
						this.allMoney = res.data.count
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			chageSelect(e) {
				this.page = 0
				this.apisuo = false
				this.is_end = false
				this.lists = []
				this.fsLog()
			},
			goback() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	/* pc */
	.bghhhhh {
		flex: 1;
		height: 300px;
	}

	.rightCon {
		width: 75%;
		margin: 0 auto;
	}

.fanshuiBox {
		width: 100%;
		margin-top: 20px;
	}
	.ul {
		width: 102%;
		height: auto;
		overflow-y: auto;
	}
	.fanshuiBox>ul {
		width: 100%;
		height: 42px;
		display: flex;
		align-items: center;
		font-size: 15px;
		color: var(--theme-text-color-darken);
		border: 1px solid var(--theme-color-line);
		justify-content: space-between;
		border-radius: 5px;
		background-color: var(--theme-bg-color);
	}

	.fanshuiBox>ul li {
		width: 16%;
		text-align: center;
	}

	.fanshuiBox>ul li:nth-child(1) {
		width: 20%;
	}

	.fanshuiBox>ul li:nth-child(6) {
		width: 10%;
	}
.fanlistBox>ul {
		width: 100%;
		height: 42px;
		display: flex;
		align-items: center;
		font-size: 15px;
		justify-content: space-between;
		border-radius: 5px;
	}

	.fanlistBox>ul li {
		width: 16%;
		text-align: center;
		color: var(--theme-text-color);
	}

	.fanlistBox>ul li:nth-child(1) {
		width: 20%;
	}

	.fanlistBox>ul:nth-child(2n) {
		background-color: var(--theme-bg-color);
	}

	.fanlistBox>ul li:nth-child(6) {
		width: 10%;
		font-size: 14px;
		cursor: pointer;
		color: var(--theme-primary-color);
	}

	.fanlistBox>ul li:nth-child(5) {
		color: var(--theme-secondary-color-finance);
	}

.rightThree {
		width: 100%;
		margin: 60px 0;
	}

	.nodataTow {
		margin: 0 auto;
		text-align: center;
	}

	.nodataTow img {
		height: 150px;
		margin-bottom: 10px;
		margin: 0 auto;
		width: 170px;
	}

	.nodataTow div {
		color: var(--theme-alt-neutral-2);
		font-size: 16px;
	}

	.pc_con {
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}

	.header {
		width: 100%;
		height: 0.9rem;
		position: fixed;
		top: 0;
		left: 0;
		background: var(--theme-main-bg-color);
		border-bottom: 0.01rem solid var(--theme-color-line);
		z-index: 100;
		padding: 0 .1rem 0 .2rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header .left {
		font-size: .24rem;
		height: 0.8rem;
		width: 0.8rem;
		display: flex;
		align-items: center;
		color: var(--theme-text-color);
		cursor: pointer;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 0.34rem;
		font-size: .3rem;
		margin-top: -0.014rem;
		color: #fff;
		text-align: center;
	}

	.header .right {
		height: 0.8rem;
		width: 0.8rem;
	}

	.con {
		width: 100%;
		margin-top: 0.9rem;
		padding: 0 0.2rem;
		padding-top: 0.2rem;
	}
.con1One{
	background: var(--theme-main-bg-color);
	box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
	padding: 10px;
	box-sizing: border-box;
	border-radius: 5px;
	margin-top: 20px;
}
	.conheader {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: .2rem;
	}
	.conheaderTow{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	select {
		max-width: 3.15rem;
		min-width: 1.6rem;
		width: auto !important;
		list-style: none;
		margin: 0;
		line-height: 1.5;
		outline: 0;
		background-color: var(--theme-top-nav-bg)!important;
		border-radius: 0.5rem;
		box-shadow: none;
		color: var(--theme-text-color);
		font-size: .2rem;
		height: 0.5rem !important;
		text-align: center;
		border-color: var(--theme-color-line);
	}

	select:focus {
		border-color: var(--theme-primary-color);
	}

	option {
		color: var(--theme-text-color);
	}
.pcSele{
	max-width: 150px;
	min-width: 90px;
	width: auto !important;
	list-style: none;
	margin: 0;
	line-height: 32px;
	outline: 0;
	background-color: var(--theme-top-nav-bg)!important;
	border-radius: 16px;
	box-shadow: none;
	color: var(--theme-text-color);
	font-size:12px;
	height:32px !important;
	text-align: center;
	border-color: var(--theme-color-line);
}
	.conheader .right {
		font-size: .22rem;
		line-height: 1.5;
		color: var(--theme-alt-neutral-2);
	}
	.conheaderTow .right{
		font-size: 13px;
		color: var(--theme-alt-neutral-2);
	}

	.nodata {
		margin: 0 auto;
		text-align: center;
		margin-top: 2rem;
	}

	.nodata img {
		height: 3.62rem;
		margin-bottom: 0.1rem;
		margin: 0 auto;
		width: 4rem;
	}

	.nodata div {
		color: var(--theme-alt-neutral-2);
		font-size: .26rem;
	}

	.fanshuiritem {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: var(--theme-top-nav-bg);;
		border-radius: 0.12rem;
		font-size: .2rem;
		margin-bottom: 0.2rem;
		min-height: 1.1rem;
		padding: 0.2rem 0 0.2rem 0;
	}

	.fanshuiritem .left {
		width: 0.2rem;
		margin-top: -0.1rem;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: rgb(173, 182, 196);
	}

	.fanshuiritem .left img {
		width: 0.5rem;
		height: 0.5rem;
	}

	.fanshuiritem .center {
		flex: 1;
		padding-left: 0.1rem;
		color: var(--theme-alt-neutral-2);
	}

	.fanshuiritem .center .up {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.14rem;
	}

	.fanshuiritem .center .up .righttext {
		flex-shrink: 0;
		padding-left: 0rem;
		padding-right: 0.06rem;
		/* width: 1.76rem; */
		text-align: left;
	}

	.fanshuiritem .icon {
		color: var(--theme-color-line);
		padding: 0 0.18rem 0 0;
	}

	.fanshuiritem .icon svg {
		display: block;
		height: 0.26rem;
		transform: rotate(180deg);
		width: 0.26rem;
	}
</style>